<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>


<body>

    <script>
        Ext.create('Ext.data.TreeStore'){
            root:{
                fields: ['text','duration','isLayover'],
                expanded:true,
                children: [{
                    text:'SFO TO DFW',
                    duration:'5h 55m',
                    expanded: true,
                    children: [{
                        text:'SFO TO PHX',
                        duration:'2h 09m',
                        leaf:true
                    },{
                        text:'PHX LAYOVER',
                        duration:'2h 33m',
                        isLayover: true,
                        leaf:true
                    },{
                        text:
                    }]
                }
                ]
            }
        }


        Ext.create('Ext.tree.Panel', {
            renderTo: Ext.getBody(),
            height: 200,
            width: 300,
            rootVisible: false,
            store: Ext.create('Ext.data.TreeStore', {
                fields: ['text', 'duration', 'isLayover'],
                root: {
                    expanded: true,
                    children: [{
                        text: 'SFO  &nbsp;✈&nbsp; DFW',
                        duration: '6h 55m',
                        expanded: true,
                        children: [{
                            text: 'SFO &nbsp;✈&nbsp; PHX',
                            duration: '2h 04m',
                            leaf: true
                        }, {
                            text: 'PHX layover',
                            duration: '2h 36m',
                            isLayover: true,
                            leaf: true
                        }, {
                            text: 'PHX &nbsp;✈&nbsp; DFW',
                            duration: '2h 15m',
                            leaf: true
                        }]
                    }]
                }
            }),
            columns: [{
                xtype: 'treecolumn',
                text: 'Flight Endpoints',
                dataIndex: 'text',
                flex: 1,
                renderer: function (val, meta, rec) {
                    if (rec.get('isLayover')) {
                        meta.style = 'color: gray; font-style: italic;';
                    }
                    return val;
                }
            }, {
                text: 'Duration',
                dataIndex: 'duration',
                width: 100
            }]
        });
    </script>


</body>
</html>